import React from 'react';
import { ModelConfig } from '../../types';

interface ModelConfigProps {
  config: ModelConfig;
  onUpdateConfig: (updates: Partial<ModelConfig>) => void;
  isTraining: boolean;
}

const ModelConfig: React.FC<ModelConfigProps> = ({ 
  config, 
  onUpdateConfig,
  isTraining 
}) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type } = e.target;
    const parsedValue = type === 'number' ? parseFloat(value) : value;
    
    onUpdateConfig({ [name]: parsedValue } as any);
  };
  
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
      <h3 className="text-lg font-medium text-gray-800 mb-4">Model Configuration</h3>
      
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label htmlFor="dim" className="block text-sm font-medium text-gray-700 mb-1">
            Dimension
          </label>
          <input
            type="number"
            name="dim"
            id="dim"
            min="16"
            step="16"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.dim}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="depth" className="block text-sm font-medium text-gray-700 mb-1">
            Transformer Depth
          </label>
          <input
            type="number"
            name="depth"
            id="depth"
            min="1"
            max="12"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.depth}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="heads" className="block text-sm font-medium text-gray-700 mb-1">
            Attention Heads
          </label>
          <input
            type="number"
            name="heads"
            id="heads"
            min="1"
            max="16"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.heads}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="mlpDim" className="block text-sm font-medium text-gray-700 mb-1">
            MLP Dimension
          </label>
          <input
            type="number"
            name="mlpDim"
            id="mlpDim"
            min="32"
            step="32"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.mlpDim}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="dropout" className="block text-sm font-medium text-gray-700 mb-1">
            Dropout
          </label>
          <input
            type="number"
            name="dropout"
            id="dropout"
            min="0"
            max="0.5"
            step="0.05"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.dropout}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="learningRate" className="block text-sm font-medium text-gray-700 mb-1">
            Learning Rate
          </label>
          <input
            type="number"
            name="learningRate"
            id="learningRate"
            min="0.0001"
            max="0.01"
            step="0.0001"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.learningRate}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="batchSize" className="block text-sm font-medium text-gray-700 mb-1">
            Batch Size
          </label>
          <input
            type="number"
            name="batchSize"
            id="batchSize"
            min="8"
            max="128"
            step="8"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.batchSize}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
        
        <div>
          <label htmlFor="epochs" className="block text-sm font-medium text-gray-700 mb-1">
            Max Epochs
          </label>
          <input
            type="number"
            name="epochs"
            id="epochs"
            min="1"
            max="100"
            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-blue-500"
            value={config.epochs}
            onChange={handleChange}
            disabled={isTraining}
          />
        </div>
      </div>
    </div>
  );
};

export default ModelConfig;